<template>
    <div class="taskStatistics">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">任务统计</span>
        </div>
        <div class="content">
            <div class="quest">
                <img src="" alt="">
                <div class="quest_content">
                    <span class="quest_title">本月任务总数：</span><span class="quest_num">280</span>
                </div>
            </div>
            <div class="line"></div>
            <div class="quest">
                <img src="" alt="">
                <div class="quest_content">
                    <span class="quest_title">年度任务总数：</span><span class="quest_num">1925</span>
                </div>
            </div>
            <div class="item_content">
                <div class="item" v-for="(item, index) in state.items" :key="index">
                    <img :src="item.image" alt="Image" class="item-image" />
                    <div class="item-info">
                        <div class="item-number">{{ item.number }}</div>
                        <div class="item-text">{{ item.text }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import icon1 from '@/assets/images/dailyMaintenance/icon1.png';
import icon2 from '@/assets/images/dailyMaintenance/icon2.png';
import icon3 from '@/assets/images/dailyMaintenance/icon3.png';
let state = reactive({
    items: [
        { image: icon1, number: '38', text: '待处理' },
        { image: icon2, number: '107', text: '逾期' },
        { image: icon3, number: '1780', text: '已完成' },
    ]
})
</script>

<style lang="scss" scoped>
.taskStatistics {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    padding-left: vh(16);
    padding-right: vh(16);
    background: url(@/assets/images/dailyMaintenance/left1.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(61);
    width: vw(422);
    height: vh(212);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: vh(11);
        // height: vh(160);

        .quest {
            display: flex;
            line-height: 1;
            padding-bottom: vh(12);

            .quest_content {
                flex: 1;
                .quest_title {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: vh(14);
                    color: #FFFFFF;
                    letter-spacing: vh(2);
                }
                .quest_num {
                    font-family: DIN;
                    font-weight: 400;
                    font-size: vh(18);
                    color: #FFAC00;
                }
            }

        }

        .line {
            width: 100%;
            height: vh(1);
            background-color: rgba(255, 255, 255, 0.2);
            margin-bottom: vh(12);
        }

        .item_content {
            display: flex;
            justify-content: space-between;
            /* 均匀分配空白 */
            .item {
                display: flex;
                align-items: center;
                /* 垂直居中 */
                width: 33.333%;
                /* 每个item占据1/3宽度 */
                // border: 1px solid #ccc;
                /* 可选：内边距 */
                box-sizing: border-box;

                /* 包含padding和border */
                .item-image {
                    background-size: 100% 100%;
                    width: vh(66);
                    height: vh(68);
                    /* 图片与文字之间的间距 */
                }

                .item-info {
                    display: flex;
                    flex-direction: column;
                    margin-top: vh(10);

                    /* 垂直排列 */
                    .item-number {
                        font-family: DIN;
                        font-weight: 400;
                        font-size: vh(18);
                        color: #FFAF00;
                    }

                    .item-text {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(12);
                        color: #9AB1B6;
                    }
                }
            }
        }
    }
}
</style>